<template>
  	<div id="app">
		<!-- 顶部title区 -->
		<div class="title">
			<span>图书管理系统</span>
			<hr/>
		</div>
		<!-- 搜索区 -->
		<div>
			<el-row :gutter="20">
				<el-col :span="5"><el-input v-model.trim="nameinput" placeholder="图书名称"></el-input></el-col>
				<el-col :span="5"><el-input v-model.trim="typeinput" placeholder="图书类别"></el-input></el-col>
				<el-col :span="2"><el-button @click="handlerSearch">查询</el-button></el-col>
				<el-col :span="2"><el-button type="primary" @click="handlerCreate">新建</el-button></el-col>

				<!-- 弹窗Form -->
				<el-dialog title="添加图书" :visible.sync="dialogFormVisible1">
					<el-form :model="form1">
						<el-form-item v-show="false" label="图书id" :label-width="formLabelWidth1">
							<el-input v-model="form1.id" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="图书名称" :label-width="formLabelWidth1">
							<el-input v-model="form1.name" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="图书类别" :label-width="formLabelWidth1">
							<el-input v-model="form1.type" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="图书价格" :label-width="formLabelWidth1">
							<el-input v-model.number="form1.price" autocomplete="off"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="handlerCancel1">取 消</el-button>
						<el-button type="primary" @click="handlerConfirm1">确 定</el-button>
					</div>
				</el-dialog>

			</el-row>
		</div>
		<!-- 列表展示区 -->
		<div>
			<el-table
			:data="tableData"
			style="width: 100%">
					
				<el-table-column
				label="图书流水号"
				width="300">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
					</template>
				</el-table-column>
			
				<el-table-column
				label="图书名称"
				width="300">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.name }}</span>
					</template>
				</el-table-column>
			
				<el-table-column
				label="图书类型"
				width="300">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.type }}</span>
					</template>
				</el-table-column>
			
				<el-table-column
				label="图书价格"
				width="300">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.price }}</span>
					</template>
				</el-table-column>
			
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button
						size="mini"
						@click="handleEdit(scope.row)">修改</el-button>
						<el-button
						size="mini"
						type="danger"
						@click="handleDelete(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
						
			</el-table>

			<!-- 修改Form -->
			<el-dialog title="添加图书" :visible.sync="dialogFormVisible2">
				<el-form :model="form2">
					<el-form-item v-show="false" label="图书id" :label-width="formLabelWidth2">
						<el-input v-model="form2.id" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="图书名称" :label-width="formLabelWidth2">
						<el-input v-model="form2.name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="图书类别" :label-width="formLabelWidth2">
						<el-input v-model="form2.type" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="图书价格" :label-width="formLabelWidth2">
						<el-input v-model.number="form2.price" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="handlerCancel2">取 消</el-button>
					<el-button type="primary" @click="handlerConfirm2">确 定</el-button>
				</div>
			</el-dialog>


		</div>

		<!-- 分页区 -->
		<div>
			<div class="block">
				<span class="demonstration">显示总数</span>
				<el-pagination
				@current-change="handleCurrentChange"
				:current-page.sync="currentPage"
				:page-size="size"
				layout="total, prev, pager, next"
				:total="total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
   //引入依赖
   import axios from 'axios'


    export default {
        name:'App',
		data(){
			return {
				nameinput: '',
				typeinput: '',
				dialogFormVisible1: false,
				formLabelWidth1: '120',
				dialogFormVisible2: false,
				formLabelWidth2: '120',
				form1: {
					id: 0,
					name: '',
					type: '',
					price: 0
				},
				form2: {
					id: 0,
					name: '',
					type: '',
					price: 0
				},
				tableData: [],
				currentPage: 1,
				size: 8,
				total: 0
			}
		},
		methods:{
			//查询按钮的点击事件
			handlerSearch(){
				this.initData()
			},
			//新建按钮点击事件
			handlerCreate(){
				this.dialogFormVisible1 = true
				this.form1 = {name: '',type: '',price: 0}
			},
			//弹窗Form1的取消
			handlerCancel1(){
				//输出消息
				this.$message.info("操作已取消")
				//关闭窗口
				this.dialogFormVisible1 = false
			},
			//弹窗Form1的确定
			handlerConfirm1(){
				//准备数据
				var result = {
					"name": this.form1.name,
					"type": this.form1.type,
					"price": this.form1.price
				}
				//发送Ajax请求数据
				axios.post('http://localhost:8080/books',result).then(res=>{
					if(res.data){
						this.$message.success("添加成功")
						this.initData()
					} else {
						this.$message.warning("数据同步失败")
					}
				}).catch(err=>{
					this.$message.error("添加失败")
				})
				//关闭窗口
				this.dialogFormVisible1 = false
				
			},
			//弹窗Form2的取消
			handlerCancel2(){
				//输出消息
				this.$message.info("操作已取消")
				//关闭窗口
				this.dialogFormVisible2 = false
			},
			//弹窗Form2的确定
			handlerConfirm2(row){
				//准备数据
				var result = {
					"id": this.form2.id,
					"name": this.form2.name,
					"type": this.form2.type,
					"price": this.form2.price
				}
				//发送Ajax请求数据
				axios.put('http://localhost:8080/books',result).then(res=>{
					if(res.data){
						this.$message.success("修改成功")
						this.initData()
					} else {
						this.$message.warning("数据同步失败")
					}
				}).catch(err=>{
					this.$message.error("修改失败")
				})
				//关闭窗口
				this.dialogFormVisible2 = false
				
			},
			//列表的修改点击事件
			handleEdit(row){
				this.dialogFormVisible2 = true
				//复写数据
				this.form2 = {id: row.id,name: row.name,type: row.type,price: row.price}
			},
			//列表的删除点击事件
			handleDelete(id){
				if(confirm("此操作不可逆,确认要删除吗?")){
					axios.delete(`http://localhost:8080/books/${id}`).then(res=>{
						if(res.data){
							this.$message.success("删除成功")
							this.initData()
						} else {
							this.$message.info("数据同步失败")
						}
					}).catch()	
				} else {
					this.$message.error("操作取消")
				}
				
			},
			//初始化数据的方法
			initData(){
				
				axios.get(`http://localhost:8080/books/${this.currentPage}/${this.size}?nameinput=${this.nameinput}&typeinput=${this.typeinput}`
				).then(res=>{
					this.tableData = res.data.records
					this.currentPage = res.data.current
					this.size = res.data.size
					this.total = res.data.total
				}).catch(err=>{
					console.log(err.message);
				})

			},
			//切换页码
			handleCurrentChange(val){
				this.currentPage = val
				this.initData()
			}
		},
		mounted(){
			this.initData()
		}
	}
</script>

<style>
	.title span{
		font-size: 30px;
	}
	.el-row {
    margin-bottom: 20px;
	}
	.el-col {
		border-radius: 4px;
	}
	.bg-purple-dark {
		background: #99a9bf;
	}
	.bg-purple {
		background: #d3dce6;
	}
	.bg-purple-light {
		background: #e5e9f2;
	}
	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
	.block{
		margin-left: 70%;
	}
</style>